<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="任务编号" prop="taskCode">
        <el-input
          v-model="queryParams.taskCode"
          placeholder="请输入任务编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入任务名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="任务执行时间" label-width="120px">
        <el-date-picker
          v-model="daterangeExecTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="taskList" height="280" highlight-current-row>
      <el-table-column label="序号" type="index" width="50"/>
      <el-table-column label="任务编号" align="center" prop="taskCode" width="130" show-overflow-tooltip/>
      <el-table-column label="任务名称" align="center" prop="taskName" width="130" show-overflow-tooltip/>
      <el-table-column label="算法编码" align="center" prop="algorithmCode" width="130" show-overflow-tooltip/>
      <el-table-column label="算法名称" align="center" prop="algorithmName" width="130" show-overflow-tooltip/>
      <el-table-column label="算法类型" align="center" prop="algorithmType" width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.algorithm_type" :value="scope.row.algorithmType"/>
        </template>
      </el-table-column>
      <el-table-column label="任务执行时间" align="center" prop="execTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.execTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务执行人" align="center" prop="execBy"/>
      <el-table-column label="算法运行时长" align="center" prop="runTime">
        <template slot-scope="scope">
          {{ scope.row.runTime }} ms
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="taskStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-video-play"
            v-if="scope.row.taskStatus === '1'"
            @click="handleExecTask(scope.row, scope.$index)"
          >执行
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            v-if="scope.row.taskStatus === '2'"
            @click="handleView(scope.row)"
          >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagination"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="result-content" v-loading="resultLoading"  element-loading-text="算法运行中">
      <div class="result-item">
        <div class="item-title">
          {{ scatterPlotTitle }}
        </div>
        <div class="item-chart">
          <ScatterPlotChart :chart-data="scatterPlotData"/>
        </div>
      </div>
      <div class="result-item">
        <div class="item-title">
          {{ answerData.name }}
        </div>
        <div class="item-chart">
          <el-tabs v-model="activeName" v-if="answerData.name !== ''">
            <el-tab-pane :label="scatterPlotData.Series[0].name" name="first">
              <el-table :data="answerData.series1" height="260">
                <el-table-column :label="answerData.attribute.index" type="index" width="50" />
                <el-table-column :label="answerData.attribute.temperature" align="center" prop="temperature" />
                <el-table-column :label="answerData.attribute.time" align="center" prop="time" />
                <el-table-column :label="answerData.attribute.pressure" align="center" prop="pressure">
                  <template slot-scope="scope">
                    {{ Number(scope.row.pressure).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.angular" align="center" prop="angular">
                  <template slot-scope="scope">
                    {{ Number(scope.row.angular).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective1" align="center" prop="objective1">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective1).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective2" align="center" prop="objective2">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective2).toFixed(6) }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="scatterPlotData.Series[1].name" name="second">
              <el-table :data="answerData.series2" height="260">
                <el-table-column :label="answerData.attribute.index" type="index" width="50" />
                <el-table-column :label="answerData.attribute.temperature" align="center" prop="temperature" />
                <el-table-column :label="answerData.attribute.time" align="center" prop="time" />
                <el-table-column :label="answerData.attribute.pressure" align="center" prop="pressure">
                  <template slot-scope="scope">
                    {{ Number(scope.row.pressure).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.angular" align="center" prop="angular">
                  <template slot-scope="scope">
                    {{ Number(scope.row.angular).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective1" align="center" prop="objective1">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective1).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective2" align="center" prop="objective2">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective2).toFixed(6) }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane :label="scatterPlotData.Series[2].name" name="third">
              <el-table :data="answerData.series3" height="260">
                <el-table-column :label="answerData.attribute.index" type="index" width="50" />
                <el-table-column :label="answerData.attribute.temperature" align="center" prop="temperature" />
                <el-table-column :label="answerData.attribute.time" align="center" prop="time" />
                <el-table-column :label="answerData.attribute.pressure" align="center" prop="pressure">
                  <template slot-scope="scope">
                    {{ Number(scope.row.pressure).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.angular" align="center" prop="angular">
                  <template slot-scope="scope">
                    {{ Number(scope.row.angular).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective1" align="center" prop="objective1">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective1).toFixed(6) }}
                  </template>
                </el-table-column>
                <el-table-column :label="answerData.attribute.objective2" align="center" prop="objective2">
                  <template slot-scope="scope">
                    {{ Number(scope.row.objective2).toFixed(6) }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { execTask, listExecTask } from '@/api/algorithm/task'
import PieChart from '@/views/dashboard/PieChart'
import LineChart from '@/views/dashboard/LineChart'
import BarChart from '@/views/dashboard/BarChart'
import LineDigitChart from '@/views/dashboard/LineDigitChart'
import ScatterPlotChart from '@/views/dashboard/ScatterPlotChart'

export default {
  name: 'Execution',
  dicts: ['task_status', 'algorithm_type'],
  components: {
    BarChart,
    PieChart,
    LineChart,
    LineDigitChart,
    ScatterPlotChart
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      resultLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 指标优化任务表格数据
      taskList: [],
      execResult: null,
      pieTitle: '',
      pieData: {},
      lineTitle: '',
      lineData: {},
      barTitle: '',
      barData: {},
      line1Title: '',
      line2Title: '',
      line3Title: '',
      line1Data: {},
      line2Data: {},
      line3Data: {},
      scatterPlotTitle: '',
      scatterPlotData: {},
      execAlgorithmCode: '',
      answerData: {
        name: '',
        attribute: {},
        series1: [],
        series2: [],
        series3: []
      },
      activeName: 'first',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 备注时间范围
      daterangeExecTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskCode: null,
        taskName: null,
        eqpId: null,
        eqpName: null,
        algorithmId: null,
        algorithmCode: null,
        algorithmName: null,
        moduleType: null,
        algorithmType: 'genetic_algorithm',
        execTime: null,
        execBy: null,
        execResult: null,
        runTime: null,
        taskStatus: null
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    /** 查询指标优化任务列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (null != this.daterangeExecTime && '' != this.daterangeExecTime) {
        this.queryParams.params['beginExecTime'] = this.daterangeExecTime[0]
        this.queryParams.params['endExecTime'] = this.daterangeExecTime[1]
      }
      listExecTask(this.queryParams).then(response => {
        this.taskList = response.rows
        this.total = response.total
        this.loading = false
        this.resultLoading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeExecTime = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleExecTask(row, index) {
      this.execAlgorithmCode = row.algorithmCode
      this.$modal.confirm('是否确认执行指标优化任务编号为"' + row.taskCode + '"的数据项？').then(() => {
        this.resultLoading = true
        return execTask(row)
      }).then((res) => {
        this.getList()
        this.$modal.msgSuccess('执行结束')
        if (res.code === 200 && res.data) {
          this.handleChartData(res.data)
        }
      }).catch(() => {
      })
    },
    handleView(row) {
      this.execAlgorithmCode = row.algorithmCode
      this.execResult = JSON.parse(row.execResult)
      this.handleChartData(this.execResult)
    },
    handleChartData(execResult) {
      if (execResult.code === 500) {
        this.$modal.msgError('算法执行失败，异常信息为：' + execResult.msg)
        return
      }
      this.answerData = execResult.answer
      this.scatterPlotTitle = execResult.ScatterPlot.name
      this.scatterPlotData = execResult.ScatterPlot
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background: #f4f4f5;
  height: calc(100vh - 84px);
}

.pagination {
  height: 50px;
}

.result-content {
  width: 100%;
  height: 390px;
  display: flex;
  margin-top: 8px;
  justify-content: space-between;
}

.result-item {
  width: 48%;
  height: 390px;
  padding: 8px;
  background: #FFFFFF;

  .item-title {
    margin: 16px 10px 8px;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #f4f4f5;
  }
  .item-chart {
    width: 100%;
    height: 340px;
  }
  .item-chart-short {
    height: 300px;
  }
  .item-chart-text {
    color: #666666;
    margin: 4px 0 4px 8px;
    font-size: 14px;
  }
  .item-text {
    color: #666666;
    margin: 16px;
    font-size: 16px;
  }
}
</style>
